<template>
	<view class="settle">
		<!-- <view class="searchInput">
			<view class="search-top">
				<view class="icon" @click="HandleReturn">
					<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">提交结算单</view>
			</view>
		</view> -->
		<view class="main-content">
			<scroll-view scroll-y class="list-box">
				<text class="title">{{companyName || '未关联公司'}}</text>
				<uni-forms ref="masterEnterForm" :modelValue="FormData" :rules="rules" label-position="top"
					label-width="300rpx">
					<uni-forms-item label="维修工时(小时)" class="form-item-vertical" name="manHour">
						<input type="number" placeholder="请输入" v-model="FormData.manHour" />
						<view class="line"></view>
					</uni-forms-item>
					<uni-forms-item label="工时费用" class="form-item-vertical" name="manHourCost">
						<view style="display: flex;align-items: center;">
							<input type="number" placeholder="请输入" v-model="FormData.manHourCost" />
							<view class="">元</view>
						</view>
						<view class="line"></view>
					</uni-forms-item>
					<uni-forms-item class="form-item-vertical" name="switch">
						<template v-slot:label>
							<view class="switch-view">
								<text>设备更换费用</text>
								<text @click="addSwitch" style="color: #325EF5">+ 添加</text>
							</view>
						</template>
						<view class="switch">
							<view class="switch-view row-center-random"
								v-for="(item,index) in FormData.deviceRenewInfos" :key="index">
								<view class="switch-view-two row-center-random">
									<input class="switch-view-two-ipt" type="text" placeholder="请输入设备名称"
										v-model="FormData.deviceRenewInfos[index].deviceRenewInfo" />
									<view class="switch-input-view row-center-random">
										<input class="switch-view-two-ipt" type="number" placeholder="请输入设备价格"
											v-model="FormData.deviceRenewInfos[index].deviceRenewMoney" />
										<text>元</text>
									</view>
								</view>
								<text class="switch-view-text" v-if="FormData.deviceRenewInfos.length!==index"
									@click="deleteSwitch(index)">- 清除</text>
							</view>
						</view>
						<text v-show="false">{{total}}</text>
					</uni-forms-item>
				</uni-forms>
			</scroll-view>
			<view class="form_bottom_btn">
				<view class="btn-box">
					<view v-for="(item, index) in bottomBtnConfig" :key="index" :class="item.class"
						@click="formSubmit(item)">
						{{ item.text }}
					</view>
				</view>
			</view>
			<!-- <you-bottom-btn :btnConfig="bottomBtnConfig" @formSubmit="formSubmit" @testReport="testReport">
			</you-bottom-btn> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		updateMasterOrderStatus
	} from "@/api/home.js"
	const {
		proxy
	} = getCurrentInstance()
	const FormData = reactive({
		manHour: '',
		manHourCost: '',
		deviceRenewInfos: [{
			deviceRenewInfo: '',
			deviceRenewMoney: '',
		}],
	})
	const rules = reactive({
		manHour: {
			rules: [{
				required: true,
				// errorMessage: '请输入维修工时',
				errorMessage: '1',
			}]
		},
		cost: {
			rules: [{
				required: true,
				// errorMessage: '请输入工时费用',
				errorMessage: '',
			}]
		},
	})
	let scrollHeight = ref('')
	const bottomBtnConfig = reactive(
		[{
			text: '总计：100元',
			class: 'exhibition',
			funcName: ''
		}, {
			text: '提交',
			class: 'confirm',
			funcName: 'formSubmit'
		}]
	)
	let orderId = ref('')
	let companyName = ref('')
	const total = computed(() => {
		let price = 0
		FormData.deviceRenewInfos.forEach((el) => {
			price += Number(el.deviceRenewMoney)
		})
		bottomBtnConfig[0].text = `总计：${FormData.manHour * FormData.manHourCost + Number(price)}元`
		return FormData.manHour * Number(FormData.manHourCost) + Number(price)

	})

	onLoad(options => {
		orderId.value = options.id;
		companyName.value = options.companyName
	})
	//添加设备更换
	function addSwitch() {
		FormData.deviceRenewInfos.push({
			deviceRenewInfo: '',
			deviceRenewMoney: '',
		})
	}
	//清除设备更换
	function deleteSwitch(index) {
		FormData.deviceRenewInfos.splice(index, 1)
	}

	function formSubmit(item) {
		if (!item.funcName) return
		if(FormData.manHourCost==0){
			uni.showToast({
				title: '工时费用最少0.01元',
				icon: 'none'
			});
			return
		}
		FormData.deviceRenewInfos = FormData.deviceRenewInfos.filter(obj => !(obj.deviceRenewInfo === "" && obj
			.deviceRenewMoney === ""))
		proxy.$refs.masterEnterForm.validate().then(res => {
			// console.log(FormData, 'FormData');
			FormData.deviceRenewInfos = FormData.deviceRenewInfos.filter(obj => !(obj.deviceRenewInfo === "" && obj.deviceRenewMoney === ""))
			updateMasterOrderStatus({
				...FormData,
				status: 5,
				id: orderId.value
			}).then(res => {
				uni.showToast({
					title: "提交成功"
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			})
		})
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.settle {
		height: 100%;
		width: 100%;

		.searchInput {
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 20rpx;
			z-index: 99;

			.search-top {
				// height: 88rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 90vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.main-content {
			width: 100%;
			height: 100%;
			padding: 20rpx 28rpx;

			.list-box {
				padding: 0 28rpx;
				border-radius: 16rpx;
				background: #ffffff;
				height: calc(100vh - 158rpx);
				overflow: hidden;

				.line {
					border-bottom: 2rpx solid #e6e6e6;
					margin: 20rpx 0;
				}

				::v-deep.uni-forms-item {
					margin-bottom: 0;
				}

				.title {
					padding: 20rpx 0;
					display: block;
					border-bottom: 2rpx solid #e6e6e6;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 600;
					line-height: 40rpx;
					opacity: 0.9;
					margin-bottom: 20rpx;
				}

				.switch-view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 20rpx;

					.switch-view-two {
						display: flex;
						justify-content: space-between;
						width: calc(100% - 100rpx);

						.switch-view-two-ipt {
							width: calc(50% - 12rpx);
							height: 60rpx;
							padding: 12rpx;
							background: #f6f8fa;
							border-radius: 10rpx;
							font-size: 26rpx;
							margin-right: 32rpx;
						}

						.switch-input-view {
							background-color: #f6f8fa;
							width: calc(50%);
							padding-right: 10rpx;
							box-sizing: border-box;
							border-radius: 10rpx;
							display: flex;
							align-items: center;

							.switch-view-two-ipt {
								width: 90%;
								margin-right: 0;

							}
						}
					}

					.switch-view-text {
						&:last-child {
							display: block;
							width: 100rpx;
							color: #325ef5;
							text-align: right;
							font-family: "PingFang SC";
							font-size: 28rpx;
							font-style: normal;
							font-weight: 400;
							line-height: 40rpx;
						}
					}
				}
			}
		}
	}

	.form_bottom_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 0 22rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		z-index: 2;

		.btn-box {
			width: 100%;
			height: 64px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: nowrap;

			.cancel {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #325ef5;
				background: #FFFFFF;
				border: 2rpx solid #325ef5;
				white-space: nowrap;
			}

			.confirm {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				border-radius: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #FFFFFF;
				background: #325ef5;
			}

			.exhibition {
				flex: 1;
				// width: 100%;
				height: 90rpx;
				margin: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 90rpx;
				color: #325ef5;
				background: #FFFFFF;
			}
		}
	}
</style>